<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test audio</title>
    <script src="../js/lib/recorder.js" ></script>
    <script src="../js/lib/jquery.js" ></script>
</head>

<body>

<video autoplay id="video"></video>
<audio autoplay id="audio"></audio>
<button id="start-recording">开始录音</button>
<button id="stop-recording-and-send">停止录音并发送</button>
<script>

function hasGetUserMedia() {
//请注意:在Opera浏览器中不使用前缀
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

$(document).ready(function() {

    $("#start-recording").click(function(e){
        rec.record();
    });

    $("#stop-recording-and-send").click(function(e){
        rec.exportWAV(function(blob) {
            console.log(blob);
            // $.ajax({//ajax失败
            //     url: "../speech2text",
            //     // url: "../../websocket/broadcast",
            //     type: "POST",
            //     conentType: "audio/wav",
            //     data: blob,
            //     success: function(data){
            //         console.log(data);
            //     }
            // });
            rec.clear();
            console.log(blob);
            // ws.send("hello world");
            // ws.binaryType="blob"
            // ws.send(blob); //websocket搞不定了。。。
            var formData = new FormData();

            // formData.append("filename", "input.wav");  // 文件名
            // JavaScript file-like 对象
            formData.append("file", blob, "input.wav");

            var request = new XMLHttpRequest();
            request.open("POST", "speech2text");
            request.send(formData);

            // websocket的例子
            // ws.send(blob);
        });
        rec.stop();
    });

    var currentUrl = window.location.href;
    currentUrl = currentUrl.replace("http://", "ws://");
    var ws = new WebSocket(currentUrl+"/../websocket");


    ws.onerror = function(){
        console.log("error");
    };

    //连接成功建立的回调方法
    ws.onopen = function(event){
        console.log("open");
    }

    //接收到消息的回调方法
    ws.onmessage = function(event){
        console.log(event.data);
    }

    //连接关闭的回调方法
    ws.onclose = function(){
        console.log("close");
    }

    var rec = null;

    if (hasGetUserMedia()) {
        alert('您的浏览器支持getUserMedia方法');

        var onFailSoHard = function() {
            alert('设备拒绝访问');
        };
//不使用供应商前缀

        navigator.getUserMedia({video: false, audio: true}, function(localMediaStream) {
//             var video = document.getElementById('video');
//             video.src = window.URL.createObjectURL(localMediaStream);
// //请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件
//             video.onloadedmetadata = function(e) {
// //后续代码略
//             };
//             var audio = document.getElementById('audio');
//             audio.src = window.URL.createObjectURL(localMediaStream);
//             audio.onloadedmetadata = function(e){
//
//             };


            var context = new window.AudioContext();
            var mediaStreamSource = context.createMediaStreamSource(localMediaStream);
            rec = new Recorder(mediaStreamSource);
            // rec.context.sampleRate=16000;//改不了

        }, onFailSoHard);


    }
    else {
        alert('您的浏览器不支持getUserMedia方法');
    }
})



</script>

</body>